<template>
	<view class="container" v-if="is_show">
		<view class="header d-flex">
			<navbar-back-button></navbar-back-button>
			<view class="header_txt position-absolute">商城</view>
		</view>
		<view>
			<view class="middle d-flex">
				<view class="middle-txt">积分兑换</view>
				<!-- <view class="more d-flex">
					<view class="more-txt">更多</view>
					<view class="more-img">
						<image class="bot-img" src="../../static/images/bottom.png"></image>
					</view>
				</view> -->
			</view>
			<view class="goods-list">
				<view class="goods-info d-flex" v-for="(item,index) in pointsMall" :key="index">
					<view class="goods-img d-flex">
						<image class="goods-img-size" :src="item.image">
					</view>
					<view class="goods-info-r">
						<view class="goods-txt">{{item.name}}</view>
						<view class="goods-price-info d-flex">
							<view class="goods-price">{{item.point}}积分</view>
							<view class="plus-icon">
								<image class="plus-img" src="../../static/images/integrals/plus.png" @tap="detail(item.id)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbarBackButton from '@/components/navbar-back-button'
	import uniSteps from '@/components/uni-steps/uni-steps'
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		components: {
			navbarBackButton,
			uniSteps
		},
		data() {
			return {
				customPoints: 0,
				stepsOption: [],
				activeDay: 0,
				pointsMall: [],
				is_show: 1,
				page: 1,
				contiune: 1,
			}
		},
		onShow() {
			// uni.showToast({
			// 	title:'未开放',
			// 	icon:'none',
			// 	duration:2000,
			// 	success() {
			// 		uni.navigateBack({})
			// 	}
			// })

		},
		async onLoad() {
			this.customPoints = this.member.pointNum
			// await this.getStepsOptions()
			// this.customPoints = await this.$api('customPoints')
			await this.getPointsMall()
		},
		computed: {
			...mapState(['member']),
			...mapGetters(['isLogin']),
		},
		methods: {
			// async getStepsOptions() {
			// 	let stepsOptions = []

			// 	const attendance = await this.$api('attendance')

			// 	attendance.forEach((item, index) => {
			// 		if(item.is_day) {
			// 			this.activeDay = index
			// 		}

			// 		let arr = {
			// 			title: item.day_name + '天',
			// 			desc: '+' + item.points
			// 		}
			// 		if(index == attendance.length - 1) {
			// 			arr.circle = '/static/images/integrals/goal.png'
			// 			arr.circleStyle = 'width: 47rpx; height: 39rpx;'
			// 		}

			// 		stepsOptions.push(arr)
			// 	})

			// 	this.stepsOption = stepsOptions
			// },
			async getPointsMall(isRefresh = false) {
				// 获取积分商品
				this.$http.get('/point/goods', {
					params: {
						page: this.page
					}
				}).then(res => {
					// console.log(res)
					if (isRefresh) {
						this.pointsMall = []
						this.page = 1
					}
					if (res.data.data.data.length == 0) {
						this.contiune = 0
					} else {
						this.pointsMall = this.pointsMall.concat(res.data.data.data)
						this.page += 1
					}

				}).catch(err => {

				})

			},
			attendance() {
				uni.navigateTo({
					url: '/pages/attendance/attendance'
				})
			},
			flow() {
				uni.navigateTo({
					url: '/pages/integrals/flow'
				})
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages/integrals/detail?point=' + this.customPoints + '&id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100vw;
		overflow: hidden;
		height: 100vh;
		background-color: #FFF;
	}

	.header {
		width: 100vw;
		height: 16vh;
		justify-content: center;
	}

	.header_txt {
		top: 104rpx;
	}

	.middle {
		width: 100vw;
		height: 64rpx;
		border-bottom: 1px solid rgb(246, 246, 246);
	}

	.middle-txt {
		width: 88%;
		height: 60rpx;
		text-align: center;
		margin: 0 20rpx;
		color: rgb(68, 68, 68);
		border-bottom: 1px solid rgb(255, 84, 84);
		font-size: 32rpx;
	}

	.more {
		width: 20%;
		justify-content: center;
		align-items: center;
	}

	.more-txt {
		color: rgb(100, 100, 100);
		font-size: 28rpx;
	}

	.more-img {
		margin-top: 7rpx;
	}

	.bot-img {
		height: 29rpx;
		width: 21rpx;
	}

	.goods-list {
		flex: 1;
		width: 100vw;
		overflow: scroll;
		background-color: rgb(249, 249, 249);
		height: calc(100vh - 21vh)
	}

	.goods-info {
		width: 94vw;
		height: 264rpx;
		margin: 10rpx auto 30rpx;
		background-color: #FFF;
		border-radius: 20rpx;
	}

	.goods-img {
		width: 30vw;
		margin-left: 15rpx;
		align-items: center;
	}

	.goods-img-size {
		width: 220rpx;
		height: 220rpx;
	}

	.goods-info-r {
		margin-left: 24rpx;
		margin-top: 30rpx;
		width: 56vw;
	}

	.goods-txt {
		color: rgb(61, 61, 61);
		font-size: 38rpx;
	}

	.goods-price-info {
		justify-content: space-between;
		margin-top: 114rpx;
	}

	.goods-price {
		font-size: 34rpx;
		color: rgb(255, 84, 84);
	}

	.plus-img {
		height: 46rpx;
		width: 46rpx;
	}
</style>
